import { Component, OnInit, ViewChild, NgModule, ElementRef, Input } from '@angular/core';
import { _HttpClient, ModalHelper } from '@delon/theme';
import { STColumnTag, STColumn, STComponent, STColumnBadge } from '@delon/abc';
import { GridComponent, SupDic, HttpService } from 'lbf';
import { SFComponent, SFSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd';
import { DelonChartModule } from '@delon/chart';
import { Chart, Util } from '@antv/g2';

@Component({
  selector: 'app-jgyj-cssxtj',
  templateUrl: './cssxtj.component.html',
  // <g2-water-wave [title]="'超时项目占比'" [percent]="csxmzb" [height]="180" ></g2-water-wave>
  //  <g2-bar height="210" [title]="'超时事项统计'" [data]="salesData"></g2-bar>
})

export class JgyjCssxtjComponent implements OnInit {

  constructor(private http: _HttpClient, 
    private modal: ModalHelper,
    private lbs: HttpService,
    public msgSrv: NzMessageService) { }
  queryFormData = {}; 
  private chart: any;
  public num ='0';
  data=[];
  @ViewChild('chart1', { static: false })  private node: ElementRef;
  @ViewChild('st', { static: true }) st: GridComponent;
  @ViewChild('searchForm', { static: false }) searchForm: SFComponent; 

  TAG: STColumnTag = {
    1: { text: '正常', color: 'green' },
    2: { text: '将到期', color: 'orange'},
    3: { text: '黄牌', color: 'yellow' },
    4: { text: '红牌', color: 'red' },
  };

  gridData = [];
  columns: STColumn[] = [
    { title: '机构', index: 'DGB021'},
    { title: '科室', index: 'DGB041'},
    { title: '岗位', index: 'RNAME' },
    { title: '对应事项', index: 'DAD017' },
    { title: '对应子项', index: 'DAE001' },
    { title: '对应环节', index: 'DAD090' ,dic: 'DAD090' },
    { title: '超时数量', index: 'CSSL' } 
  ];

  csxmzb: number;
  ln_num = 0;
  cxxmzb() {
    this.lbs.lbservice("cssxtj_cszb", { para: {} }).then(resdata => {
      if (resdata.code < 1) {
        this.msgSrv.error(resdata.errmsg);
      }
      else
      {
        this.csxmzb = resdata.message.list[0].CSZB;
        // console.log('this.csxmzb',this.csxmzb)        
      }
    });
  }  

  ngOnInit(){
    /*setTimeout(() => {
      // location.reload();
       opener.reload();
      // this.chart.reload();
    }, 60000); */
  }   

  // tslint:disable-next-line: use-lifecycle-interface
  ngAfterViewInit(){
    setTimeout(() => {
      this.cxxmzb()
    }, 10); 
  }
  
  click(){
    this.Queryforchart(); 
    if(!this.data ){setTimeout(() => {
      this.chartrender();
    }, 500);}
  }

  Queryforchart(){
    this.lbs.lbservice("cssxtj_sxchart", { para: {} }).then(resdata => {
      if (resdata.code < 1) {
        this.msgSrv.error(resdata.errmsg);
      }
      else
      { 
        // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。     
        this.data = resdata.message.list;
        this.ln_num = resdata.message.list.length;        
        return this.data;
      }
    });
  }
 
  chartrender() {
    if(this.num === '0'){ 
      const { node } = this;
      const container = node.nativeElement as HTMLElement;
      this.num = '1';   
      // Step 1: 创建 Chart 对象    
      this.chart = (this.chart=new G2.Chart({
        container, // 指定图表容器 ID
        width : this.ln_num * 250, // 指定图表宽度
        height : 500, // 指定图表高度
        forceFit: false,  // 自动宽度
        padding: [ 80, 70, 80, 70 ] // 上，右，下，左边距
      })) 
      this.chart.axis(true);  // 带坐标轴
      // Step 2: 载入数据源
      this.chart.source(this.data);
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      this.chart.interval().position('DGB041*CSSL').color('DGB041')
      // Step 4: 渲染图表    
      this.chart.render();       
    }
    else
    {  
        this.chart.source(this.data); 
        // console.log('thsi.data2',this.data);
        this.chart.interval().position('DGB041*CSSL').color('DGB041')
        this.chart.render();
    }
  }
  
}
